<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="" prop="hosp">
        <el-select v-model="queryParams.hosp" filterable  placeholder="请选择医院">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="" prop="operateDeptId" v-if="queryParams.hosp">
          <el-select v-model="queryParams.operateDeptId" filterable placeholder="请选择所属科室" class="wp100">
            <el-option v-for="item in deptAll" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

      <el-form-item label="" prop="titleName">
        <el-input v-model="queryParams.titleName" placeholder="请输入问卷名称" clearable />
      </el-form-item>
      
      <el-form-item label="" prop="sourceName">
        <el-input v-model="queryParams.sourceName" placeholder="请输入来源" clearable />
      </el-form-item>

      <!-- <el-form-item label="" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
          <el-option v-for="dict in dict.type.topic_content_status" :key="dict.value" :label="dict.label"
            :value="dict.value" />
        </el-select>
      </el-form-item> -->

      <!-- <el-form-item label="开始时间" prop="beginTime">
        <el-date-picker v-model="queryParams.beginTime" type="date" value-format="yyyy-MM-dd" placeholder="开始时间">
        </el-date-picker>
       <el-input v-model="queryParams.beginTime" placeholder="开始时间" clearable  />
      </el-form-item> -->

      <!-- <el-form-item label="结束时间" prop="endTime">
        <el-date-picker v-model="queryParams.endTime" type="date" value-format="yyyy-MM-dd" placeholder="结束时间">
        </el-date-picker>
        <el-input v-model="queryParams.endTime" placeholder="结束时间" clearable />
      </el-form-item> -->

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
          v-hasPermi="['hcem:content:export']">导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="contentList" @selection-change="handleSelectionChange">
      <!-- <el-table-column type="selection" width="55" align="center" /> -->
      <el-table-column label="问卷模板名称" align="center" prop="titleName" />
      <el-table-column label="医院" align="center" prop="hospitalName" />
      <el-table-column label="科室" align="center" prop="deptName" />
      <!-- <el-table-column label="状态" align="center" prop="status">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.topic_content_status" :value="scope.row.status" />
        </template>
      </el-table-column> -->
      <el-table-column label="提交时间" align="center" prop="createTime" />
      <el-table-column label="填写所用时间" align="center" prop="useTime" />
      <el-table-column label="综合评分" align="center" prop="synthesisScore" />
      <el-table-column label="填写人ip" align="center" prop="ip" />
      <el-table-column label="来源" align="center" prop="sourceName" />
      <!-- <el-table-column label="ip所在地" align="center" prop="ipLocation" /> -->
      <!-- <el-table-column label="用户手机号" align="center" prop="userPhone" /> -->
      <!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleView(scope.row)">查看</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleMark(scope.row)">标记</el-button>
        </template>
      </el-table-column> -->
      <!-- <el-table-column label="用户名称" align="center" prop="userName" /> -->
      <!-- <el-table-column label="医生id" align="center" prop="doctorId" />
      <el-table-column label="所属运营科室id" align="center" prop="operateDeptId" />
      <el-table-column label="使用模板id" align="center" prop="templateId" />
      <el-table-column label="链接id" align="center" prop="linkId" /> -->
      <!-- <el-table-column label="分值内容" align="center" prop="topicScoreInfo" /> -->

    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <!-- 添加或修改问卷内容对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <!-- <el-form-item label="填写人ip" prop="ip">
          <el-input v-model="form.ip" placeholder="请输入填写人ip" />
        </el-form-item>
        <el-form-item label="问卷模板名称" prop="titleName">
          <el-input v-model="form.titleName" placeholder="请输入问卷模板名称" />
        </el-form-item>
        <el-form-item label="ip所在地" prop="ipLocation">
          <el-input v-model="form.ipLocation" placeholder="请输入ip所在地" />
        </el-form-item>
        <el-form-item label="医生id" prop="doctorId">
          <el-input v-model="form.doctorId" placeholder="请输入医生id" />
        </el-form-item>
        <el-form-item label="所属运营科室id" prop="operateDeptId">
          <el-input v-model="form.operateDeptId" placeholder="请输入所属运营科室id" />
        </el-form-item>
        <el-form-item label="使用模板id" prop="templateId">
          <el-input v-model="form.templateId" placeholder="请输入使用模板id" />
        </el-form-item>
        <el-form-item label="来源" prop="sourceName">
          <el-input v-model="form.sourceName" placeholder="请输入来源" />
        </el-form-item>
        <el-form-item label="医院" prop="hosp">
          <el-input v-model="form.hosp" placeholder="请输入医院" />
        </el-form-item>
        <el-form-item label="用户名称" prop="userName">
          <el-input v-model="form.userName" placeholder="请输入用户名称" />
        </el-form-item>
        <el-form-item label="用户手机号" prop="userPhone">
          <el-input v-model="form.userPhone" placeholder="请输入用户手机号" />
        </el-form-item>
        <el-form-item label="链接id" prop="linkId">
          <el-input v-model="form.linkId" placeholder="请输入链接id" />
        </el-form-item>
        <el-form-item label="分值内容" prop="topicScoreInfo">
          <el-input v-model="form.topicScoreInfo" placeholder="请输入分值内容" />
        </el-form-item> -->

        <!-- <el-form-item label="分值内容" prop="topicScoreInfo">
          <el-input v-model="form.topicScoreInfo" placeholder="请输入分值内容" />
        </el-form-item> -->

        <el-form-item label="标记内容" prop="mark">
          <el-input v-model="form.mark" placeholder="请输入标记内容" />
        </el-form-item>

        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio v-for="dict in dict.type.topic_content_status" :key="dict.value" :label="parseInt(dict.value)">{{
              dict.label }}</el-radio>
          </el-radio-group>
          <span class="p-l-30" style="color: #02C9F0;cursor: pointer;" @click="$router.push({path:'/system/dict-data/index/105'})">
            管理
          </span>
        </el-form-item>
        <!-- <el-form-item label="填写所用时间" prop="useTime">
          <el-input v-model="form.useTime" placeholder="请输入填写所用时间" />
        </el-form-item>
        <el-form-item label="综合得分" prop="synthesisScore">
          <el-input v-model="form.synthesisScore" placeholder="请输入综合得分" />
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listContent, getContent, delContent, addContent, updateContent } from "@/api/hcem/content";
import { getDeptList } from "@/api/hcem/doctor";
import { hosList } from "@/api/hcem/title";

export default {
  name: "Content",
  dicts: ['topic_content_status'],
  data() {
    return {
      deptAll:[],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 问卷内容表格数据
      contentList: [],
      // 弹出层标题
      title: "",
      options: [],//医院列表选项
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        hosp: null,
        sourceName: null,
        status: null,
        beginTime: '',
        endTime: ''
        // useTime: null,
        // synthesisScore: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        status: [
          { required: true, message: "状态不能为空", trigger: "change" }
        ],
        mark: [
          { required: true, message: "标记内容不能为空", trigger: "blur" }
        ],

      }
    };
  },
  computed: {
    findMyDeptlabel() {
      return (depValue) => {
        if (depValue) {
          let findDept = this.deptAll.find(val => val.value == depValue)
          if(findDept !== undefined){
            return findDept.label
          }else{
            return '科室ID错误'
          }
        } else {
          return '暂无'
        }
      }
    },
    findSex(){
      return (sexValue)=>{
        if(sexValue == 2) return '男'
        if(sexValue == 1) return '女'
        if(sexValue == 0) return '未知'
      }
    }
  },
 async created() {
   await this.getHosList()
   await this.getList();
  },
  computed: {
    findMyDeptlabel() {
      return (depValue) => {
        if (depValue) {
          let findDept = this.deptAll.find(val => val.value == depValue)
          if(findDept !== undefined){
            return findDept.label
          }else{
            return '科室ID错误'
          }
        } else {
          return '暂无'
        }
      }
    },
  },
  methods: {
    async getHosList() {
      let res = await hosList()
      let data = res.data
      data.forEach(v => {
        this.options.push({
          value: v.hospital_code,
          label: v.hospital_name
        })
      })
      // this.options.unshift({
      //   value: null,
      //   label: '全部医院'
      // })

      // console.log(res);
    },
    /** 查询问卷内容列表 */
    getList() {
      this.loading = true;
      listContent(this.queryParams).then(response => {
        this.contentList = []
        response.rows.forEach(v => {
          let findArr = this.options.find(params => params.value == v.hosp)
         // console.log(findArr,111);
          if (findArr !== undefined) v['hospitalName'] = findArr.label

          // let LabelList = this.allStatus.find(params => {
          //  // console.log(params.value, 123, v.status);
          //   return params.value == v.status
          // })
          // // console.log(LabelList);
          // if (LabelList !== undefined) v.statusLabel = LabelList.label

        })
        this.contentList.push(...response.rows)
        if( response.rows !== undefined &&  response.rows.length > 0){
          this.myHosp(response.rows[0].hosp)
        }
        this.total = response.total;
        this.loading = false;
      });
    },
    myHosp(val) {
      let parms = { hospitalCode: val }
      if(val) this.queryParams.hosp = val
      this.getMyDeptList(parms)
      // console.log(val,111);
    },
    async getMyDeptList(parms) {
      let res = await getDeptList(parms)
      if (res.code == 200) {
        this.deptAll = res.data.map(v => {
          return {
            value: v.id,
            label: v.operateDeptName
          }
        })
        //console.log(this.deptAll);
      }
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        ip: null,
        titleName: null,
        ipLocation: null,
        doctorId: null,
        operateDeptId: null,
        templateId: null,
        sourceName: null,
        hosp: null,
        userName: null,
        userPhone: null,
        linkId: null,
        topicScoreInfo: null,
        status: null,
        useTime: null,
        createTime: null,
        updateTime: null,
        synthesisScore: null,
        mark: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加问卷内容";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getContent(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改问卷内容";
      });
    },
    //标记
    handleMark(row) {
      this.handleUpdate(row)
    },
    //查看
    handleView(row) {
     // console.log(row);
      this.$router.push({ name: 'contentdetails',query:{id:row.id} })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateContent(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addContent(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    // handleDelete(row) {
    //   const ids = row.id || this.ids;
    //   this.$modal.confirm('是否确认删除问卷内容编号为"' + ids + '"的数据项？').then(function() {
    //     return delContent(ids);
    //   }).then(() => {
    //     this.getList();
    //     this.$modal.msgSuccess("删除成功");
    //   }).catch(() => {});
    // },
    /** 导出按钮操作 */
    handleExport() {
      this.download('hcem/content/export', {
        ...this.queryParams
      }, `content_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
